
<div class="w-full">
  <div class="flex w-full">
    <div aria-disabled="false" class="group aria-disabled:select-none aria-disabled:pointer-events-none w-full">
      <div class="relative">
        <div class="bg-stone-200 absolute group-data-[completed=true]:bg-stone-500"></div>
        <span class="relative z-10 grid h-10 w-10 place-items-center rounded-full bg-stone-200 text-surface-foreground group-data-[active=true]:bg-stone-500 group-data-[active=true]:text-primary-foreground group-data-[completed=true]:bg-stone-500 group-data-[completed=true]:text-primary-foreground">1</span>
      </div>
    </div>
    <div aria-disabled="true" class="group aria-disabled:select-none aria-disabled:pointer-events-none w-full">
      <div class="relative">
        <div class="bg-stone-200 absolute group-data-[completed=true]:bg-stone-500"></div>
        <span class="relative z-10 grid h-10 w-10 place-items-center rounded-full bg-stone-200 text-surface-foreground group-data-[active=true]:bg-stone-500 group-data-[active=true]:text-primary-foreground group-data-[completed=true]:bg-stone-500 group-data-[completed=true]:text-primary-foreground">2</span>
      </div>
    </div>
    <div aria-disabled="true" class="group aria-disabled:select-none aria-disabled:pointer-events-none">
      <div class="relative">
        <span class="relative z-10 grid h-10 w-10 place-items-center rounded-full bg-stone-200 text-surface-foreground group-data-[active=true]:bg-stone-500 group-data-[active=true]:text-primary-foreground group-data-[completed=true]:bg-stone-500 group-data-[completed=true]:text-primary-foreground">3</span>
      </div>
    </div>
  </div>
  <div class="mt-14 flex w-full justify-between gap-4">
    <button disabled="" class="inline-flex items-center justify-center border align-middle select-none font-sans font-medium text-center duration-300 ease-in disabled:opacity-50 disabled:shadow-none disabled:cursor-not-allowed focus:shadow-none text-sm py-2 px-4 shadow-sm hover:shadow-md bg-stone-800 hover:bg-stone-700 relative bg-gradient-to-b from-stone-700 to-stone-800 border-stone-900 text-stone-50 rounded-lg hover:bg-gradient-to-b hover:from-stone-800 hover:to-stone-800 hover:border-stone-900 after:absolute after:inset-0 after:rounded-[inherit] after:box-shadow after:shadow-[inset_0_1px_0px_rgba(255,255,255,0.25),inset_0_-2px_0px_rgba(0,0,0,0.35)] after:pointer-events-none transition antialiased">Previous</button>
    <button class="inline-flex items-center justify-center border align-middle select-none font-sans font-medium text-center duration-300 ease-in disabled:opacity-50 disabled:shadow-none disabled:cursor-not-allowed focus:shadow-none text-sm py-2 px-4 shadow-sm hover:shadow-md bg-stone-800 hover:bg-stone-700 relative bg-gradient-to-b from-stone-700 to-stone-800 border-stone-900 text-stone-50 rounded-lg hover:bg-gradient-to-b hover:from-stone-800 hover:to-stone-800 hover:border-stone-900 after:absolute after:inset-0 after:rounded-[inherit] after:box-shadow after:shadow-[inset_0_1px_0px_rgba(255,255,255,0.25),inset_0_-2px_0px_rgba(0,0,0,0.35)] after:pointer-events-none transition antialiased">Next</button>
  </div>
</div>
